<template>
	<view>
		<view class="login-tel">
			<view class="tel-main">
				<view class="logo">
					<image src="../../static/logoall3.png" alt="">
				</view>
				<view class="login-form">
					<view class="login-user">
					  <text class="user-text">手&nbsp;&nbsp;机&nbsp;&nbsp;号&nbsp;&nbsp;:</text>
					  <input type="number" focus="true" v-model="userName" value="" placeholder="请输入正确的11位手机号">
						</view>
						
						<view class="login-user">
					
								<text class="user-text">新&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;:</text>
								<input :type="showPwd ? 'text' : 'password'" v-model="userPwd" value="" placeholder="请输入密码" class="no-border">
								<view class="show-pwd" @tap="toggleShowPwd">{{ showPwd ? '隐藏密码' : '显示密码' }}</view>
							
							</view>
					
					<view class="login-user">
					  <text class="user-text">确认新密码:</text>
					  <input :type="showPwd ? 'text' : 'password'" v-model="confirmUserpwd" value="" placeholder="请再次输入密码" class="no-border">
					</view>
					<view class="login-user">
						<text class="user-text">验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码&nbsp;:</text>
						<input type="text" placeholder="请输入验证码" v-model="userCode">
						
							
						
						<button class="btn" plain="true" size="mini"  @tap="sendcode">{{codemsg}}</button>
								
					</view>
				</view>
		    </view>
		    <view class="tel" @tap="gonextIndex">下一步</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'//把login方法拿过来
	import $http from '@/common/api/request.js'//引入request组件
	export default {
		data() {
			return {
				userName: '',
				user:[],
				type: 'recode',
				userPwd: '',
				confirmUserpwd: '',
				showPwd: false, // 控制密码显示或隐藏
				// 显示的倒计时时间
				codenum: 60,
				// 显示的文本
				codemsg: "",
				// 按钮是否禁用
				disable: false,
				//用户输入的内容
				userCode: "" ,// 添加usercode属性并初始化为空字符串
				phone:"",//上个页面传过来的phone
				getCode:"",
				
				rules: {
					userName: {
					    rule: /^1[3456789]\d{9}$/,
					    msg: "请输入正确的11位手机号"
					  },
					  userPwd: {
					    rule: /^[0-9a-zA-z]{6,16}$/,
					    msg: "密码应该为6-16位字符"
					  } ,userCode: {
					    rule: /^\d{4}$/,
					    msg: "请输入四位数验证码"
					  },
					},
					 
					 } 				
					
		},
		
			mounted() {
			this.codemsg = '重新发送(' + this.codenum + ')';
		
			
		},
		onLoad(e){
			this.phone=e.phone;
		},
		methods: {
			...mapMutations(['login']),
			// 发送验证码
			sendcode() {
				if (!this.validate('userName')) return;
				if (!this.validate('userPwd')) return;
			
				if (this.userPwd !== this.confirmUserpwd) {
				  uni.showToast({
				    title: "两次输入的密码不一致",
				    icon: "none"
				  });
				  return;
				} else{
				//请求接口返回验证码
				uni.request({
					url:"http://43.136.172.73/api/v1/user/send_msg",//验证码的接口地址，他还没给我
					method:"GET",
					header: {
					  'Content-Type': 'application/json',
					  'Content-Type': 'application/x-www-form-urlencoded',
					  'Authorization': 'sfsdf'
					},
					data:{
						phone:this.userName,//给后端给的phone
						type:this.type,
					
					}
				}).then((res)=>{
					console.log(res)
					this.getCode=res.code;//res.code就是拿到的验证码,需要拿拿到的this.getCode与用户输入的userCode对比	
					//console.log(res.code);//打印一下从后端拿到的code值
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
				}
				this.disable = false;
				let timer = setInterval(() => {
					--this.codenum;
					this.disable = false;
					this.codemsg = '重新发送('+this.codenum+')';
				}, 1000);//一秒减一次
				setTimeout(() => {
					clearInterval(timer);
					this.codenum = 60;
					this.disable = true;
					this.codemsg = '重新发送';
				}, 60000);//60秒后重发
			},
			validate(key){
				let bool=true;
				if(  !this.rules[key].rule.test(this[key])){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					bool=false;
					return false;
				}
				return bool;
			},
			toggleShowPwd() { // 切换密码显示或隐藏
			  this.showPwd = !this.showPwd;
			},
			gonextIndex() {
				if (!this.validate('userName')) return;
				if (!this.validate('userPwd')) return;
				if( !this.validate('userCode')) return;
				if (this.userPwd !== this.confirmUserpwd) {
				  uni.showToast({
				    title: "两次输入的密码不一致",
				    icon: "none"
				  });
				  return;
				}  else{
					let requestData = {
					password: this.userPwd,
					phone:this.userName,
					code: this.userCode,
					 type:this.type
					
					};
					//var url = 'http://43.136.172.73/api/v1/user/upgrade_sex';
					//var id=this.user.id;
					
					
					//url += '?password=' + encodeURIComponent(this.userPwd) + '&phone=' + encodeURIComponent(this.userName) + '&code=' + encodeURIComponent(this.userCode);
					//请求接口向后端数据库增加一条数据
					uni.request({
						url:"http://43.136.172.73/api/v1/user/change_password",//验证码的接口地址
						method:'PUT',
						 data: requestData,
							
	
						header: {
						  'Content-Type': 'application/json',
						//  "Content-Type": "application/x-www-form-urlencoded",
						  'Authorization': 'sfsdf',
						},
						success: (res) => {
								console.log('5555666:', this.type)
								  	console.log('5555:', this.user.phone)
							console.log('99966:', res.data)
							this.users = res.data.data;
							// console.log('6666:', this.users.sex)
						uni.showToast({
								          title: '修改成功，请重新登陆查看最新信息',
								          icon: 'none',
								          duration: 2000
								        });
							setTimeout(() => {
										  uni.navigateTo({
										    url: '../login/login'
										  });
										}, 2000);
							
							  },
							  fail: (err) => {
							    console.error('Error:', err)
							  }
						
						
						
					})
					}
			
		
				
			//连了后端下面的else得删，上面的要还原
					// else{
						// uni.showToast({
						// 		          title: '修改成功，请重新登陆查看最新信息',
						// 		          icon: 'none',
						// 		          duration: 2000
						// 		        });
						// 	setTimeout(() => {
						// 				  uni.navigateTo({
						// 				    url: '../login/login'
						// 				  });
						// 				}, 2000);
						 
						//}
			},
			
		}
	}
</script>

<style scoped>
.login-tel {
  padding: 30rpx;
  width: 100vw;
  height: 100vh;
}

.tel-main {
  padding: 0rpx 20rpx;
  padding-top: 0rpx;
}
.logo{
	padding-top: 70rpx;
	padding-bottom: 80rpx;
	display: flex;
	justify-content: center;
	
}
.tel {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #FFFF;
  background-color: #49BDFB;
  border-radius: 40rpx;
}

.login-form {
	position: relative;
		display: flex;
		flex-direction: column;
		white-space: nowrap;
		width: 100%; /* 或根据需求设置合适的宽度 */
	
	}
	.login-user {
	position: relative;
	display: flex;
	align-items: center;
	height: 100rpx;
	line-height: 100rpx;
	text-align: left;
	color:black;
	background-color: #f7f7f7;
	border-radius: 40rpx;
	padding: 20rpx 0;
	margin: 20rpx 0rpx;
	border-bottom: 2rpx solid #f7f7f7;
		
	}
	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 32rpx;
		align-items: center;
		text-align: center;
		color: black;
		font-weight: 400;	
	}

.show-pwd {
  position: absolute;
  right: 50rpx;
  color: #49BDFB;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  cursor: pointer;

}

.no-border {
outline: none;
  border:none ;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx; 
}


	.btn {
	right: 10rpx;
	
	}
</style>
